<template>
  <el-drawer
    v-model="visible"
    title="主题设置"
    direction="rtl"
    size="320px"
    :show-close="true"
    :with-header="false"
    destroy-on-close
  >
    <div class="theme-drawer">
      <!-- 标题区域 -->
      <div class="drawer-header">
        <h2 class="drawer-title">主题设置</h2>
        <p class="drawer-subtitle">自定义您的界面显示风格</p>
      </div>

      <el-scrollbar>
        <div class="drawer-content">
          <el-form label-position="top">
            <!-- 布局设置 -->
            <div class="setting-block">
              <h3 class="block-title">布局模式</h3>
              <div class="layout-radio-group">
                <div
                  class="layout-item"
                  :class="{ active: themeConfig.layout === 'vertical' }"
                  @click="handleLayoutChange('vertical')"
                >
                  <div class="layout-preview vertical-preview"></div>
                  <span>纵向布局</span>
                </div>
                <div
                  class="layout-item"
                  :class="{ active: themeConfig.layout === 'horizontal' }"
                  @click="handleLayoutChange('horizontal')"
                >
                  <div class="layout-preview horizontal-preview"></div>
                  <span>横向布局</span>
                </div>
              </div>
            </div>

            <!-- 主题模式 -->
            <div class="setting-block">
              <h3 class="block-title">主题模式</h3>
              <div class="theme-radio-group">
                <div
                  class="theme-item"
                  :class="{ active: themeConfig.theme === 'light' }"
                  @click="handleThemeChange('light')"
                >
                  <div class="theme-preview light-preview"></div>
                  <span>浅色模式</span>
                </div>
                <div
                  class="theme-item"
                  :class="{ active: themeConfig.theme === 'dark' }"
                  @click="handleThemeChange('dark')"
                >
                  <div class="theme-preview dark-preview"></div>
                  <span>深色模式</span>
                </div>
              </div>
            </div>

            <!-- 主题色 -->
            <div class="setting-block">
              <h3 class="block-title">主题色</h3>
              <div class="color-picker-group">
                <el-color-picker
                  v-model="themeConfig.primaryColor"
                  show-alpha
                  @change="handleChange"
                >
                  <template #default="{ color }">
                    <div class="color-block">
                      <div
                        class="color-preview"
                        :style="{ backgroundColor: color }"
                      ></div>
                      <span>主题色</span>
                    </div>
                  </template>
                </el-color-picker>
              </div>
            </div>

            <!-- 菜单配色 -->
            <div class="setting-block">
              <h3 class="block-title">菜单配色</h3>
              <div class="menu-color-group">
                <div class="color-block">
                  <div class="color-label">侧边栏背景</div>
                  <el-color-picker
                    v-model="themeConfig.sidebarColor"
                    show-alpha
                    @change="handleChange"
                  >
                    <template #default="{ color }">
                      <div
                        class="color-preview"
                        :style="{ backgroundColor: color }"
                      ></div>
                    </template>
                  </el-color-picker>
                  <div class="color-desc">设置侧边栏的背景颜色</div>
                </div>

                <div class="color-block">
                  <div class="color-label">菜单文字</div>
                  <el-color-picker
                    v-model="themeConfig.menuTextColor"
                    show-alpha
                    @change="handleChange"
                  >
                    <template #default="{ color }">
                      <div
                        class="color-preview"
                        :style="{ backgroundColor: color }"
                      ></div>
                    </template>
                  </el-color-picker>
                  <div class="color-desc">设置菜单项的文字颜色</div>
                </div>

                <div class="color-block">
                  <div class="color-label">选中背景</div>
                  <el-color-picker
                    v-model="themeConfig.menuActiveBgColor"
                    show-alpha
                    @change="handleChange"
                  >
                    <template #default="{ color }">
                      <div
                        class="color-preview"
                        :style="{ backgroundColor: color }"
                      ></div>
                    </template>
                  </el-color-picker>
                  <div class="color-desc">设置菜单选中时的背景色</div>
                </div>
              </div>
            </div>

            <!-- 字体大小 -->
            <div class="setting-block">
              <h3 class="block-title">字体大小</h3>
              <el-slider
                v-model="themeConfig.fontSize"
                :min="12"
                :max="18"
                :step="1"
                :format-tooltip="value => `${value}px`"
                show-input
                @change="handleChange"
              />
            </div>
          </el-form>
        </div>
      </el-scrollbar>

      <!-- 底部操作栏 -->
      <div class="drawer-footer">
        <el-button type="primary" @click="handleReset">恢复默认</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useThemeStore, type ThemeConfig } from "@/store/theme";
import type { Ref } from 'vue'

const visible: Ref<boolean> = ref(false);
const themeStore = useThemeStore();
const themeConfig: ThemeConfig = reactive<ThemeConfig>({ ...themeStore.config });

// 处理布局改变
const handleLayoutChange = (layout: 'vertical' | 'horizontal'): void => {
  themeConfig.layout = layout;
  handleChange();
};

// 处理主题模式改变
const handleThemeChange = (theme: 'light' | 'dark'): void => {
  themeConfig.theme = theme;
  handleChange();
};

// 处理配置改变
const handleChange = (): void => {
  themeStore.updateConfig(themeConfig);
};

const handleReset = (): void => {
  themeStore.resetTheme();
  Object.assign(themeConfig, themeStore.config);
};

// 暴露方法类型
interface ExposeType {
  open: () => void
}

defineExpose<ExposeType>({
  open: () => (visible.value = true)
})

defineOptions({
  name: 'ThemeDrawer'
})
</script>

<style lang="scss" scoped>
.theme-drawer {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--el-bg-color);

  .drawer-header {
    padding: 20px 20px 0;
    border-bottom: 1px solid var(--el-border-color-light);

    .drawer-title {
      margin: 0;
      font-size: 18px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }

    .drawer-subtitle {
      margin: 8px 0 16px;
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }
  }

  .drawer-content {
    flex: 1;
    padding: 20px;

    .setting-block {
      margin-bottom: 24px;

      .block-title {
        margin: 0 0 16px;
        font-size: 15px;
        font-weight: 500;
        color: var(--el-text-color-primary);
      }

      // 布局选择
      .layout-radio-group,
      .theme-radio-group {
        display: flex;
        gap: 12px;

        .layout-item,
        .theme-item {
          flex: 1;
          text-align: center;
          cursor: pointer;
          padding: 8px;
          border-radius: 4px;
          border: 1px solid var(--el-border-color);
          transition: all 0.3s;

          &:hover {
            border-color: var(--el-color-primary);
          }

          &.active {
            border-color: var(--el-color-primary);
            background-color: var(--el-color-primary-light-9);
          }

          .layout-preview,
          .theme-preview {
            height: 60px;
            margin-bottom: 8px;
            border-radius: 4px;
            border: 1px solid var(--el-border-color);
            overflow: hidden;
            position: relative;
          }

          span {
            font-size: 14px;
            color: var(--el-text-color-primary);
          }
        }
      }

      // 颜色选择器组
      .color-picker-group,
      .menu-color-group {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        .color-block {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;

          .color-preview {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            border: 1px solid var(--el-border-color);
            cursor: pointer;
            transition: transform 0.2s;

            &:hover {
              transform: scale(1.05);
            }
          }

          span {
            font-size: 12px;
            color: var(--el-text-color-secondary);
          }
        }
      }
    }
  }

  .drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--el-border-color-light);
    text-align: right;
  }
}

// 预览图样式
.vertical-preview {
  position: relative;
  background-color: var(--el-bg-color);
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    background-color: var(--el-color-primary-light-8);
  }
  
  &::after {
    content: '';
    position: absolute;
    left: 30%;
    top: 0;
    width: 70%;
    height: 100%;
    background-color: var(--el-color-primary-light-9);
  }
}

.horizontal-preview {
  position: relative;
  background-color: var(--el-bg-color);
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 30%;
    background-color: var(--el-color-primary-light-8);
  }
  
  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    height: 70%;
    background-color: var(--el-color-primary-light-9);
  }
}

.light-preview {
  background-color: #ffffff;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 10%;
    top: 20%;
    width: 80%;
    height: 15%;
    background-color: var(--el-color-primary-light-8);
  }
  
  &::after {
    content: '';
    position: absolute;
    left: 10%;
    top: 45%;
    width: 60%;
    height: 15%;
    background-color: var(--el-color-primary-light-9);
  }
}

.dark-preview {
  background-color: #1a1a1a;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 10%;
    top: 20%;
    width: 80%;
    height: 15%;
    background-color: #4c4c4c;
  }
  
  &::after {
    content: '';
    position: absolute;
    left: 10%;
    top: 45%;
    width: 60%;
    height: 15%;
    background-color: #333333;
  }
}

// 深色模式适配
:deep(html.dark) {
  .theme-drawer {
    .drawer-header {
      border-bottom-color: var(--el-border-color-dark);
    }

    .drawer-footer {
      border-top-color: var(--el-border-color-dark);
    }

    .setting-block {
      .layout-item,
      .theme-item {
        border-color: var(--el-border-color-dark);

        &:hover {
          border-color: var(--el-color-primary);
        }

        &.active {
          border-color: var(--el-color-primary);
          background-color: var(--el-color-primary-light-9);
        }
      }
    }
  }
}

.menu-color-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;

  .color-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--el-border-color-light);
    transition: all 0.3s;

    &:hover {
      border-color: var(--el-color-primary);
      transform: translateY(-2px);
    }

    .color-preview {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      border: 1px solid var(--el-border-color);
      cursor: pointer;
    }

    .color-label {
      font-size: 13px;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }

    .color-desc {
      font-size: 12px;
      color: var(--el-text-color-secondary);
      text-align: center;
    }
  }
}
</style>
